<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>星级评分</title>
</head>
<style>
    /**{
        box-sizing: border-box;
    }*/

    .sub {
        background-image: url(33.png);
        background-size: 100%;
        width: 40px;
        height: 40px;
        /*background-color: gold;*/
        /*display: inline-block;*/
        padding: 0px;
        background-repeat: repeat;
    }

    .css {
        width: 200px;

        /*height: 40px;*/
         display: flex;
    }

    .star {
        background-color: gold;
    }
</style>

<body>
    <div id="app">

        <input v-model.number="vol">
        <test @ratiochange="jieshou" :value="vol"></test>

    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>


<script type="test/html" id="star">
    <div @dblclick="gbclick" class="css" v-bind:style="lineStyle">
        <div class="sub" data-star="1" @mousemove="onclick" v-bind:title="str1"></div>
        <div class="sub" data-star="2" @mousemove="onclick" v-bind:title="str2"></div>
        <div class="sub" data-star="3" @mousemove="onclick" v-bind:title="str3"></div>
        <div class="sub" data-star="4" @mousemove="onclick" v-bind:title="str4"></div>
        <div class="sub" data-star="5" @mousemove="onclick" v-bind:title="str5"></div>
    </div>
</script>


<script>
    Vue.component("test", {
        template: '#star',
        props: ['value'],
        data: function () {
            return {
                str1: '差评',
                str2: '不好的评价',
                str3: '中评',
                str4: '还好',
                str5: '好评'
            }
        },

        methods: {
            onclick: function (e) {
                var num = $(e.target).attr('data-star') * 1;
                console.log(num);
                $('.sub').removeClass('star');
                for (var i = 0; i < num; i++) {
                    $('.sub')[i].classList.add('star');
                }
                this.$emit('ratiochange', num)
            },
            gbclick: function () {
                $('.sub').removeClass('star')
            }
        },

        // 
        computed: {
            // lineStyle 绑定到大div上面，通过父组件传过来的value，来动态改变
            // 大div中的css样式，例如background
            lineStyle: function () {
                var percent = this.value/5 * 100 + '%';

                var bg = " linear-gradient(to right,gold ,gold " + percent + ",pink, pink " + percent + " )"
                return {
                    background: bg
                }
            }
        }
    })


    // 根组件
    new Vue({
        el: '#app',
        data: {
            vol: 0,
            str1: 'good',

        },
        methods: {
            jieshou: function (e) {
                this.vol = e;
            }
        }

    })

</script>

</html>